<template>
  <table class="general-measure-table pos-rlt table-bordered font-size-12 table-hover font-color-black-bold border-t-lighter" style="border: 2px solid #bbb">
    <thead class="ng-isolate-scope cell-size-limit">
    <tr class="text-center thead-border-1 cell-size-limit">
      <th class="text-center" rowspan="2">{{ $t('loc.measure') }}</th>
      <th class="text-center" rowspan="2">{{ $t('loc.mseName') }}</th>
      <th v-for="parentLevel in parentLevels" :colspan="parentLevel.levels.length">
        <span class="text-center">{{ parentLevel.firstName || '' }}</span>
      </th>
    </tr>
    <tr class="text-center cell-size-limit thead-border-1">
      <th v-for="level in Levels" class="text-center">
        <span class="text-center">{{ level.name }}</span>
      </th>
    </tr>
    </thead>
    <tbody>
    <template v-for="domain in domainLevelsEntries">
      <tr class="ng-scope">
        <td :colspan="Levels.length + 2" class="border-l-lighter border-r-lighter rateTableTitle">
          <img class="add-margin-l-6 ng-hide" src="" width="25" alt="">
          <span class="add-margin-l-6 ng-binding"> {{ domain.parentName }} </span>
        </td>
      </tr>
      <tr v-for="measure in domain.domainLevelsEntries">
        <td class="border-l-lighter ng-binding border-light">{{ measure.measure }}</td>
        <td class="ng-binding border-light pointer">
          <span>{{ measure.measureName }}</span>
          <span v-if="measure.core === true" class="text-danger ng-scope" style="font-size:18px; line-height: 1">*</span>
          <el-icon class="right add-margin-r-6 font-size-16"><ArrowRight /></el-icon>
        </td>
        <template v-for="leve in measure.levelEntities">
          <td v-if="(leve && leve.type === 'radio')">
            <el-tooltip
                v-if="leve.tip"
                class="box-item"
                effect="dark"
                :content="!measureIsCanChecked(measure) && '该测评点还没有被观察' || leve.tip"
                placement="top"
            >
              <div class="radio-wrapper pointer" :class="{'only-show' : !measureIsCanChecked(measure)}" v-if="leve && leve.type === 'radio'" @click="toScore(measure, leve)">
                <i :class="{'radio-checked' : isCheckedLevel(measure.domainId, leve.id)}"></i>
              </div>
            </el-tooltip>
            <div v-else class="radio-wrapper pointer" :class="{'only-show' : !measureIsCanChecked(measure)}" v-if="leve && leve.type === 'radio'" @click="toScore(measure, leve)">
              <i :class="{'radio-checked' : isCheckedLevel(measure.domainId, leve.id)}"></i>
            </div>
          </td>
          <td :class="{'forbid-rate' : !leve}" v-if="!leve">
          </td>
        </template>
      </tr>
    </template>
    </tbody>
  </table>
</template>

<script>
import {
  DArrowRight,
  ArrowRight,
} from '@element-plus/icons-vue'
import FrameworkApi from "@/api/framework";

export default {
  name: "GeneralMeasureTable",
  components: {
    DArrowRight,
    ArrowRight
  },
  props: {
    childId: {
      type: String,
      default: '',
    },
    frameworkScoreTemplate:{
      type: Object,
      default: () => {
        return {
          levelEntries: [],
        }
      },
    },
    periodAlias : {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      childScoreList: [],
      childMeasureNoteIds: [],
    }
  },
  computed : {
    measureIsCanChecked () {
      return (measure) => {
        if (!this.childMeasureNoteIds || !this.childMeasureNoteIds.length) {
          return false
        }
        return this.childMeasureNoteIds.find(item => item.measureId === measure.domainId)
      }
    },
    isActivePeriod() {
      return !!this.periodAlias.active
    },
    // <!--   本表将 EM 选项隐藏了 -->
    parentLevels() {
      if (!this.frameworkScoreTemplate.scoreTemplate) {
        return []
      }
      return this.frameworkScoreTemplate.scoreTemplate.levelEntries.filter(item=> item.levels[0].name !== 'EM') || []
    },
    Levels() {
      return this.parentLevels.flatMap((level) => {
        return level.levels
      }) || []
    },
    domainLevelsEntries () {
      if (!this.frameworkScoreTemplate.scoreTemplate) {
        return []
      }
      return this.frameworkScoreTemplate.scoreTemplate.domainLevelsEntries || []
    },
    isCheckedLevel () {
      return (measureId, leveId) => {
        if (!this.childScoreList || !this.childScoreList.length) {
          return false
        }
        return this.childScoreList.find(item => item.measureId === measureId && item.levelId === leveId)
      }
    },

  },
  watch: {
    periodAlias: {
      handler: function (val, oldVal) {
        if (val && val.name !== oldVal.name ) {
          this.gerChildScore()
          this.getMeasureNotesByChildId()
        }
      },
      deep: true
    },
    childId: {
      handler: function (val, oldVal) {
        console.log('childId', val, oldVal)
        if (val && val !== oldVal) {
          this.gerChildScore()
          this.getMeasureNotesByChildId()
        }
      },
      deep: true
    },
  },
  created() {
    this.gerChildScore()
    this.getMeasureNotesByChildId()
  },
  methods: {
    toScore(measure, leve) {
      console.log('toScore', measure, leve)
      if (!this.childId || !measure || !leve) {
        return
      }
      if (!this.measureIsCanChecked(measure)) {
        return
      }
      let param = [{
        measureId: measure.domainId,
        levelId: leve.id,
        childId: this.childId,
        frameworkId: this.frameworkScoreTemplate.frameworkId,
        periodAlias: this.periodAlias.name,
      }]
      FrameworkApi.scoresMeasure(param).then(res => {
       let newLeve = {measureId: measure.domainId,
            levelId: leve.id,}
        // 先将 之前的删除
        this.childScoreList = this.childScoreList.filter(item => item.measureId !== newLeve.measureId)
        this.childScoreList.push(newLeve)
        this.$message.success('评分成功')
      }).catch(error => {
        this.$message.error(error.response.data.description)

      })
    },

    gerChildScore () {
      let periodAlias = this.periodAlias.name
      if (!periodAlias  || !this.childId) {
        return
      }
      FrameworkApi.getChildScore(this.childId, periodAlias, null).then(res => {
        this.childScoreList = res
      }).catch(error => {
        this.$message.error(error.response.data.description)
      })
    },
    getMeasureNotesByChildId () {
      if (!this.periodAlias.startAndEndTime ||this.periodAlias.startAndEndTime.length === 0 || !this.childId ) {
        return
      }
      let startDate = this.periodAlias.startAndEndTime[0]
      let endDate = this.periodAlias.startAndEndTime[1]
      FrameworkApi.getMeasureNotesByChildId(this.childId, startDate, endDate).then(res => {
        this.childMeasureNoteIds = res.measureNotesList
      }).catch(error => {
        this.$message.error(error.response.data.description)
      })
    }
  },
}
</script>
<style lang="less" scoped>
.general-measure-table {
  width: 100%;
  border-collapse: collapse;
  th {
    max-width: 120px;
    min-width: 60px;
    padding: 2px;
    border: 1px solid #ddd;
    line-height: 1.42857143;
  }
  td {
    line-height: 1.42857143;
    white-space: nowrap;
    padding: 3px;
    border: 1px solid #ddd;
  }
}
.radio-wrapper {
  width: 18px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #0099db;
  margin: auto;

  .radio-checked {
    margin: -1px;
    width: 18px;
    height: 14px;
    background-color: #0099db;
    display: block;
    border-radius: 50%;
  }
}
</style>
<style scoped>
.forbid-rate {
  background-color: rgba(245,245,245,.55);
}
.ktr{
  background-color: #f5f5e6;
}
.ktext{
  color: #fc9000;
}
.kradio-wrapper{
  width: 18px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #fc9000 ;
  margin: auto;
}
.kradio-wrapper>.radio-checked {
  margin: -1px;
  width: 18px;
  height: 14px;
  background-color: #fc9000;
  display: block;
  border-radius: 50%;
}
.khover:hover{
  color: #af9471 !important;
}
.khover:visited{
  color: #181716 !important;
}
.checkbox-wrapper.only-show, .radio-wrapper.only-show {
  border-color: #C2C2CA;
  cursor: not-allowed;
}
.only-show {
  border-color: #C2C2CA !important;
  cursor: not-allowed !important;
}
.kcheckbox-wrapper {
  border: 1px solid  #fc9000;
}
.kcheckbox-wrapper>.checkbox-checked {
  width: 10px;
  height: 10px;
  margin: 2px;
  display: block;
  background-color: #fc9000;
}
.rateTableTitle {
  background-color: #F9F9F9;
  height: 32px;
  padding: 0!important;
  line-height: 32px!important;
}
.border-light {
  border-right-color: #bbb!important;
  border-left-color: #bbb!important;
}
</style>

